<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" import = "com.zzty.taskapp.entity.User"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ZZTY</title>
<!-- BOOTSTRAP STYLES-->
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/bootstrap-datetimepicker.css" rel="stylesheet" />
<!-- CUSTOM STYLES-->
<link href="../css/custom.css" rel="stylesheet" />
</head>
<script type="text/javascript">
<%
User user = (User) request.getSession().getAttribute("user");
String img = (String) user.getImg();
%>
</script>
<body>
	<div id="wrapper">
		<nav class="navbar navbar-default navbar-cls-top " role="navigation"
			style="margin-bottom: 0">
			<div class="navbar-header">
				<!--                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse"> -->
				<!--                     <span class="sr-only">Toggle navigation</span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                 </button> -->
				<a class="navbar-brand">自在天原</a>
			</div>
			<div
				style="color: white; padding: 15px 50px 5px 50px; float: right; font-size: 16px;">
				<form action="../loginOut.jsp" method="post">
					<button type="submit" class="btn btn-danger">注销</ button>
				</form>
			</div>
		</nav>
		<!-- /. NAV TOP  -->
		<nav class="navbar-default navbar-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav" id="main-menu">
					<li class="text-center"><img src="<%=img%>"
						class="user-image img-responsive" /></li>


					<!-- 					<li><a href="../index.jsp"><i -->
					<!-- 							class="fa fa-dashboard fa-3x"></i> 主页</a></li> -->
					<!-- 					<li><a href="UserInfo.jsp"><i class="fa fa-table fa-3x"></i> -->
					<!-- 							个人信息</a></li> -->
					<li><a href="TeacherSelfExam.jsp"><i
							class="fa fa-desktop fa-3x"></i> 竞赛批改</a></li>
					<li><a href="TeamGrade.jsp"><i class="fa fa-qrcode fa-3x"></i>
							结对批改</a></li>
					<li><a href="AssginTask.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 竞赛布置</a></li>
					<li><a href="grouping.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 结对分组</a></li>
					<li><a href="StudentScore.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 学生成绩</a></li>
					<li><a href="DataBaseSelect.jsp"><i
							class="fa fa-bar-chart-o fa-3x"></i> 数据库查询</a></li>
					<!-- 					<li><a href="ChangePassword.jsp"><i -->
					<!-- 							class="fa fa-edit fa-3x"></i> 密码修改 </a></li> -->

				</ul>

			</div>

		</nav>
		<!-- /. NAV SIDE  -->
		<div id="page-wrapper">
			<div id="page-inner">

				<div class="container">
					<form action="../TeacherServlet" class="form-horizontal"
						role="form" method="POST">
						<fieldset>
							<legend>布置作业</legend>
							<div class="form-group">
								<label for="dtp_input2" class="col-md-2 control-label">日期：</label>
								<div class="input-group date form_date col-md-5" data-date=""
									data-date-format="dd MM yyyy" data-link-field="dtp_input2"
									data-link-format="yyyy-mm-dd">
									<input class="form-control" size="16" type="text" value=""
										name="tdate" readonly> <span class="input-group-addon"><span
										class="glyphicon glyphicon-calendar"></span></span>
								</div>
								<input type="hidden" id="dtp_input2" value="" name="tdate1" /><br />
							</div>

							<div class="form-group">
								<label for="dtp_input2" class="col-md-2 control-label">结对/竞赛</label>
								<div class="radio">
									<label> <input type="radio" name="taskType"
										id="optionsRadios1" value="team" checked />结对
									</label> <label> <input type="radio" name="taskType"
										id="optionsRadios1" value="self" checked />竞赛
									</label>
								</div>

							</div>



							<div class="form-group">
								<label for="dtp_input2" class="col-md-2 control-label">添加题目：</label>
								<div class="form-group col-md-5">
									<textarea class="form-control" name="tquestion" id="tquestion"
										rows="8"></textarea>
								</div>
							</div>

							<div class="form-group">
								<div for="dtp_input2" class="col-md-2 control-label"></div>

								<div class="form-group col-md-5">
									<a class="btn  btn-default" role="button"
										onclick="addRow1('new')">添加</a> <a class="btn  btn-default"
										data-toggle="modal" data-target="#myModal" role="button"
										onclick="openQuestions()">题库</a>
								</div>
							</div>

							<div class="form-group">
								<label for="dtp_input2" class="col-md-2 control-label">最终题目：</label>
								<div class="col-md-6">
									<!--   Basic Table  -->
									<div class="panel panel-default">

										<div class="panel-body">
											<div class="table-responsive">
												<table name="tableQuestions"
													class="table table-striped table-bordered table-hover"
													id="tquestions"
													style="word-break: break-all; word-wrap: break-all;">
													<thead>
														<tr>

															<th>题目</th>
															<th>删除</th>
														</tr>
													</thead>
													<tbody>


													</tbody>
												</table>
											</div>
										</div>
									</div>
								</div>
							</div>
							<input type="hidden" id="formQids" name="formQids"></input>
							<div class="form-group">
								<div for="dtp_input2" class="col-md-4 control-label"></div>
								<div class="form-group col-md-5">
									<button type="submit" class="btn btn-primary btn-default">提交</button>
								</div>
							</div>

						</fieldset>
						<input type="hidden" name="q_ids"></input>
					</form>


					<!-- 模态框（Modal） -->
					<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
						aria-labelledby="myModalLabel" aria-hidden="true">
						<input type="hidden" id="hquesions"></input>
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-hidden="true">×</button>
									<h4 class="modal-title" id="myModalLabel">题库</h4>
								</div>
								<div class="modal-body">




									<div class="panel panel-default">
										<div class="panel-heading"></div>
										<div class="panel-body">
											<div class="table-responsive">
												<table
													class="table table-striped table-bordered table-hover"
													id="tablequestion">
													<thead>
														<tr>
															<th></th>
															<th>题目</th>

														</tr>
													</thead>
													<tbody>
														<tr class="odd gradeX">
															<td><label><input type="checkbox" value="1"
																	onclick="selectRemoveQuestion(this)"></label></td>
															<td>写一个hello world 写一个hello world 写一个hello world
																写一个hello world 写一个hello world 写一个hello world</td>
														</tr>
														<tr class="odd gradeX">
															<td><label><input type="checkbox" value="2"
																	onclick="selectRemoveQuestion(this)"></label></td>
															<td>写一个hello world 写一个hello world 写一个hello world</td>
														</tr>
														<tr class="odd gradeX">
															<td><label><input type="checkbox" value="3"
																	onclick="selectRemoveQuestion(this)"></label></td>
															<td>写一个hello world 写一个hello world 写一个hello world
																写一个hello world 写一个hello world 写一个hello world</td>
														</tr>


													</tbody>
												</table>
											</div>

										</div>
										<div align="center">
											<ul class="pagination" id="ul1">
												<!-- 												<li><a href="#">&laquo;</a></li> -->
												<!-- 												<li class="active"><a href="#">1</a></li> -->
												<!-- 												<li class="disabled"><a href="#">2</a></li> -->
												<!-- 												<li><a href="#">3</a></li> -->
												<!-- 												<li><a href="#">4</a></li> -->
												<!-- 												<li><a href="#">5</a></li> -->
												<!-- 												<li><a href="#">&raquo;</a></li> -->
											</ul>
										</div>



									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default"
											data-dismiss="modal">关闭</button>
										<button type="button" class="btn btn-primary"
											onclick="saveQuestion()">提交更改</button>
									</div>
								</div>
								<!-- /.modal-content -->
							</div>
							<!-- /.modal-dialog -->
						</div>
						<!-- /.modal -->



					</div>
					<!-- /. PAGE INNER  -->
				</div>
				<!-- /. PAGE WRAPPER  -->
			</div>

			<!-- /. WRAPPER  -->
			<!-- SCRIPTS -AT THE BOTOM TO REDUCE THE LOAD TIME-->
			<!-- JQUERY SCRIPTS -->
			<script src="../js/jquery-1.10.2.js"></script>
			<!-- BOOTSTRAP SCRIPTS -->
			<script src="../js/bootstrap.min.js"></script>
			<!-- METISMENU SCRIPTS -->
			<script src="../js/jquery.metisMenu.js"></script>






			<script type="text/javascript"
				src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
			<script type="text/javascript" src="../js/AjaxAPI.js" charset="UTF-8"></script>
			<script src="../js/jquery.dataTables.js"></script>
			<script type="text/javascript">
				$('.form_date').datetimepicker({
					language : 'fr',
					weekStart : 1,
					todayBtn : 1,
					autoclose : 1,
					todayHighlight : 1,
					startView : 2,
					minView : 2,
					forceParse : 0
				});
			</script>
			<script type="text/javascript">
				var questions;
				var p;
				var q = 0;
				function addRow1(flag, content, qid) {
					var tab = document.getElementById("tquestions");
					if ("new" == flag
							&& document.getElementById("tquestion").value == "") {
						return;
					}
					var row = tab.insertRow(-1);

					var cell1 = row.insertCell(-1);
					var cell2 = row.insertCell(-1);
					if ("new" == flag) {
						cell1.innerHTML = "<textarea name='newquestions'  cols='60' rows='3' readonly='readonly'>"
								+ document.getElementById("tquestion").value
								+ "</textarea>";
						cell2.innerHTML = "<a href='javascript:;' onclick='del(this)' >删除</a>";
					} else {
						cell1.innerHTML = "<textarea name='existquestions'  cols='60' rows='3' readonly='readonly'>"
								+ content + "</textarea>";
						cell2.innerHTML = "<a href='javascript:;' onclick='del(this,"
								+ qid + ")' >删除</a>";

					}

					document.getElementById("tquestion").value = "";

				}

				function del(obj, qid) {
					var tr = obj.parentNode.parentNode;
					tr.parentNode.removeChild(tr);
					if (qid != null && qid != undefined) {
						var questionids = document.getElementById("formQids").value;

						strs = questionids.split("|");
						alert(strs);
						for (i = 0; i < strs.length; i++) {
							if (strs[i] == qid) {
								strs.splice(i, 1);
								break;
							}
						}

						document.getElementById("formQids").value = strs
								.join("|");
					}

				}

				function selectRemoveQuestion(obj) {

					var questionIds = document.getElementById("hquesions").value;
					if (obj.checked) {
						//add question
						document.getElementById("hquesions").value = questionIds
								+ "|" + obj.value

					} else {
						//remove question
						strs = questionIds.split("|");
						for (i = 0; i < strs.length; i++) {
							if (strs[i] == obj.value) {
								strs.splice(i, 1);
								break;
							}
						}

						document.getElementById("hquesions").value = strs
								.join("|");
					}

				}

				function openQuestions() {
					p = 1;
					q = 0;
					clearTable();
					ajaxCall("get", "../TeacherServlet", initQuestions);
				}

				function initQuestions(result) {

					var obj = JSON.parse(result);
					questions = obj;
					// 					alert(questions.length);

					initUl();

					// 					document.getElementById("ul1").innerHTML = '<li><a href="#">&laquo;</a></li><li class="active"><a href="#">1</a></li><li class="disabled"><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">&raquo;</a></li>';
					for ( var i in obj) {
						addRow(obj[i].id, obj[i].content);
						if (i == 9) {
							return;
						}
						// 						document.getElementById("ul1").innerHTML = "<li><a href="#">&laquo;</a></li><li class="active"><a href="#">1</a></li><li class="disabled"><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">&raquo;</a></li>";
					}
				}
				function initUl() {
					var x = '<li onclick = "changeQuestiondelete()"><a href="#">&laquo;</a></li>';

					for (var i = 1; i < (questions.length / 10) + 1; i++) {
						x = x
								+ '<li id="li1" value="'
								+ i
								+ '"onclick="changeQuestion(value)"><a href="#">'
								+ i + '</a></li>';
						q++;

					}
					//alert(q);
					var y = '<li onclick=changeQuestionadd()><a href="#">&raquo;</a></li>';
					document.getElementById("ul1").innerHTML = x + y;

				}
				function changeQuestion(value) {
					var j = 0;
					clearTable();
					p = value;
					//alert(value);
					for (var i = (value * 10 - 10); i < questions.length; i++) {

						addRow(questions[i].id, questions[i].content);
						j++;
						if (j == 10) {
							return;
						}
					}
				}
				function changeQuestiondelete() {
					if (p == 1) {
						changeQuestion(p);
					} else {
						--p;
						changeQuestion(p);
					}
				}

				function changeQuestionadd() {
					if (p == q) {
						changeQuestion(p);
					} else {
						++p;
						changeQuestion(p);
					}
				}

				function clearTable() {
					var tb = document.getElementById('tablequestion');
					var rowNum = tb.rows.length;
					for (i = 1; i < rowNum; i++) {
						tb.deleteRow(i);
						rowNum = rowNum - 1;
						i = i - 1;
					}
				}

				function addRow(id, content) {
					var tb = document.getElementById('tablequestion');
					var newTr = tb.insertRow();
					var newTd0 = newTr.insertCell();
					var newTd1 = newTr.insertCell();
					newTd0.innerHTML = "<input type=checkbox value=" + id
							+ " onclick='selectRemoveQuestion(this)'>";
					newTd1.innerText = content;
				}

				function saveQuestion() {
					document.getElementById("formQids").value = document
							.getElementById("hquesions").value;

					var strs = document.getElementById("formQids").value
							.split("|");
					for (i = 1; i < strs.length; i++) {
						var content = getQuestionContent(strs[i]);
						addRow1(true, content, strs[i]);
					}

					$('#myModal').modal('hide');
				}

				function getQuestionContent(id) {
					for ( var i in questions) {
						if (questions[i].id == id) {
							return questions[i].content;
						}
					}
				}
			</script>
</body>
</html>
